import { useState } from "react";
import style from "./index.module.scss";
import bg from "@/assets/images/halloween/bg.png";
import rule from "@/assets/images/halloween/reward/rule.png";
import song_s from "@/assets/images/halloween/reward/song_s.png";
import song_d from "@/assets/images/halloween/reward/song_d.png";
import shouzhao_s from "@/assets/images/halloween/reward/shouzhao_s.png";
import shouzhao_d from "@/assets/images/halloween/reward/shouzhao_d.png";
import reward_song from "@/assets/images/halloween/reward/reward-song.png";
import reward_shouzhao from "@/assets/images/halloween/reward/reward-shouzhao.png";
import Content from "./content";
// import { closeFun } from './util';
const Index = () => {
  const [showPage, setShowPage] = useState(0);
  const [type, setType] = useState(1);
  return (
    <>
      {showPage !== 1 && showPage !== 2 && (
        <div className={style.container}>
          <img src={bg} alt="背景图" />
          <div
            className={`${style.btn} ${style.btn1}`}
            onClick={() => setShowPage(1)}
          >
            {/* 奖励 */}
          </div>
          <div
            className={`${style.btn} ${style.btn2}`}
            onClick={() => setShowPage(2)}
          >
            {/* 规则 */}
          </div>

          <Content type={1} />
        </div>
      )}
      {showPage === 1 && (
        <div className={style.questionWrap}>
          <img src={type === 1 ? reward_song : reward_shouzhao} alt="图片" />

          <div className={style.btn_back} onClick={() => setShowPage(0)}></div>
          <div className={style.btn_box}>
            <div
              className={`${style.btn_switch}  ${
                type === 1 ? "" : style.no_select
              }`}
              onClick={() => setType(1)}
            >
              <img src={type === 1 ? song_s : song_d} alt="" />
            </div>
            <div
              className={`${style.btn_switch} ${
                type === 2 ? "" : style.no_select
              } `}
              onClick={() => setType(2)}
            >
              <img src={type === 2 ? shouzhao_s : shouzhao_d} alt="" />
            </div>
          </div>
        </div>
      )}
      {showPage === 2 && (
        <div
          className={`${style.questionWrap} ${style.questionWrap1}`}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          <img src={rule} alt="图片" />
          <div className={style.btn_back} onClick={() => setShowPage(0)}></div>
          <div className={style.content_box}>
            <div className={style.ruleDetail}>
              <p>1、本活动时间为 10月28-11月4日，截止到11月4日23:59:59。</p>
              <p>2、送出/收到专属万圣节专属礼物，1钻石对应1点捣蛋值。</p>
              <p>
                3、收糖果
                排行榜前三名即可获得额外钻石奖励+虚拟道具奖励，(额外奖励需满足最低捣蛋值要求，第一名最低51000捣蛋值，第二名最低26000捣蛋值，第三名最低16000
                捣蛋值达不到要求不予发放)。
              </p>
              <p>
                4、活动截止后如果送糖果/糖果/找糖果如果出现数值相同的情况，如第一名和第二名都是1000捣蛋值的情况，先到的为第一名，后到的为第二名。
              </p>
              <p>
                5、奖励发放时间将在活动结束后5个工作日发放，若奖励未到账，请请关注微信公众号「pupu找搭子」私聊进行领取;
              </p>
              <p>6、最终解释权归PUPU找搭子所有，该活动与苹果公司无关。</p>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Index;
